$(function () {
    init();

    //定义分类数据:
    var CateDatas;
    //定义左侧滚动条: 
    var LeftScroll;
    function init() {
        //左侧数据:
        rendCategories()
        //左侧点击事件:
        eventList()
    }

    //绑定左侧菜单的点击事件:
    function eventList() {
        $('.left').on('tap', 'li', function () {
            //利用排他法给点击元素添加样式并且移出所有兄弟元素的active样式:
            $(this).addClass('active').siblings().removeClass('active');
            //给每一个li设置索引:
            var index = $(this).index();
            //右侧渲染:
            renderRight(index);
            //点击菜单 往上置顶:
            LeftScroll.scrollToElement(this);
        })
        //屏幕的宽度改变事件:
        window.onresize = ()=>{
            setFont();
        }
    }

    //渲染数据:
    function rendCategories() {
        //首先判断本地是否有缓存数据:
        if(localStorage.getItem('cates')){   //有旧的缓存数据:
            //获取到旧的缓存数据:
            let oldStorage = localStorage.getItem('cates');
            //将缓存数据解析为对象:
            let localData = JSON.parse(oldStorage);

            //判断是否过期: 设定过期时间为10s:
            if(Date.now() - localData.time > 10000){
                //如果已经过期了,重新申请数据：
                getCategories()
            }else{ //没有过期,则渲染数据：
                //获取到数据:
                CateDatas = localData.data;
                //渲染左侧数据:
                rendLeft()
                //渲染右侧数据:
                renderRight(0);
            }

        }else{ //如果没有旧的数据:
            //重新申请数据:
            getCategories();
        }
    }

    //左侧数据渲染:
    function rendLeft() {
        let html = template('leftTpl', {
            data: CateDatas
        })
        $('.left').html(html)

        //初始化左侧滚动条:
        LeftScroll = new IScroll('.left');
    }

    //申请数据:
    function getCategories() {
        $.get("categories",function (res) {
            if (res.meta.status == 200) {
                CateDatas = res.data;
                
                //存入分页数据:
                let obj = {
                    data:CateDatas,
                    //1970.1.1到现在的时间(ms)
                    time:Date.now()
                }
                //将数据转化成字符串:
                let jsonCateDatas = JSON.stringify(obj);

                //设置缓存:
                localStorage.setItem('cates',jsonCateDatas);
                //渲染左侧数据:
                rendLeft();
                //渲染右侧内容:
                renderRight(0)
            }
            },
        );
    }

    //右侧数据:
    function renderRight(index) {
        //拿取到右侧数据:
        let childrens = CateDatas[index].children;
        let rightHtml = template('rightTpl', {
            data: childrens
        })
        $('.right').html(rightHtml)

        //处理优化问题:
        let time = $('.right img').length;
        $('.right img').on('load', () => {
            time--;
            if (time == 0) {
                //初始化滚动条:
                let rightScroll = new IScroll('.right')
            }
        })
    }

    setFont();

    //设置rem的搭建：
    function setFont() {
        //计算html的fontsize的大小 = 基础值 * 要适配的屏幕宽度 / 设计稿界面宽度

        //定义基础值:
        let baseVal = 100;
        //设计稿宽度:
        let pageWidth = 640;
        //屏幕宽度:
        let screenWdith = document.querySelector('html').offsetWidth;
        //要设置的字体大小:
        let fontsize = baseVal * screenWdith / pageWidth;
        //最后把要设置的字体大小设置给html:
        document.querySelector('html').style.fontSize = fontsize + 'px';

    }
})